<template>
  <div class="tab-container">
    <Tabs value="activeName">
      <TabPane v-for="item in tabMapOptions" :label="item.name"  :key='item.id' :name="item.code" >
        <keep-alive>
          <tab-pane :type='item.id'></tab-pane>
        </keep-alive>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import tabPane from './components/groupDetail'
import {
  getAllGroupTypes
} from '@/api/admin/group/index'
export default {
  name: 'group',
  components: {
    tabPane
  },
  data () {
    return {
      tabMapOptions: [
      ],
      activeName: 'role'
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      getAllGroupTypes().then(data => {
        this.tabMapOptions = data
      })
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 30px;
  }
</style>
